<template>
	<view class="work-order-container">
		<!-- 头部区域 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-content" @click="closePage()">
					<view class="header-left">
						<view class="back-btn">
							<text class="back-icon">←</text>
						</view>
					</view>
					<view class="header-center">
						<text class="page-title">历史工单</text>
					</view>
					<view class="header-right">
						<view class="header-actions">
							<text class="action-text">{{appealData ? appealData.length : 0}}个工单</text>
						</view>
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 工单列表 -->
			<view class="work-order-list" v-if="appealData && appealData.length > 0">
				<view class="work-order-item" v-for="appeal in appealData" :key="appeal._id" @click="lookInfo(appeal)">
					<!-- 工单头部 -->
					<view class="order-header">
						<view class="order-info">
							<view class="order-number">
								<text class="number-label">工单号：</text>
								<text class="number-value">{{ appeal.orderNo || '暂无' }}</text>
							</view>
							<view class="order-type">
								<view class="type-badge" :class="{
									'type-complaint': appeal.type === '投诉',
									'type-suggestion': appeal.type === '建议',
									'type-appeal': appeal.type === '申述',
									'type-other': appeal.type === '其他' || !appeal.type
								}">
									<text class="badge-text">{{ appeal.type || '未知' }}</text>
								</view>
							</view>
						</view>
						<view class="order-status">
							<view class="status-badge" :class="{
								'status-pending': appeal.status === '待处理',
								'status-processing': appeal.status === '处理中',
								'status-completed': appeal.status === '已完成',
								'status-rejected': appeal.status === '已驳回'
							}">
								<text class="status-text">{{ appeal.status || '未知' }}</text>
							</view>
						</view>
					</view>

					<!-- 工单内容 -->
					<view class="order-content">
						<text class="content-text">{{ appeal.content || '暂无内容' }}</text>
					</view>

					<!-- 处理进度 -->
					<view class="progress-section" v-if="appeal.progress && appeal.progress.length">
						<view class="progress-title">
							<view class="title-left">
								<text class="title-text">处理进度</text>
								<text
									class="progress-count">({{appeal.progress ? appeal.progress.length : 0}}条记录)</text>
							</view>
							<view class="expand-btn" @click="toggleProgress(appeal._id)"
								v-if="appeal.progress.length > 4">
								<text class="expand-text">{{getExpandedStatus(appeal._id) ? '收起' : '展开'}}</text>
								<text class="expand-icon">{{getExpandedStatus(appeal._id) ? '▲' : '▼'}}</text>
							</view>
						</view>
						<view class="progress-list">
							<view class="progress-item"
								v-for="(item, index) in getDisplayProgress(appeal.progress, appeal._id)"
								:key="item._id">
								<view class="progress-dot" :class="{
									'active': appeal.progress && index === appeal.progress.length - 1,
									'completed': item.status === '已完成',
									'processing': item.status === '处理中',
									'pending': item.status === '待受理'
								}"></view>
								<view class="progress-content">
									<view class="progress-header">
										<text class="progress-status" :class="{
											'status-completed': item.status === '已完成',
											'status-processing': item.status === '处理中',
											'status-pending': item.status === '待受理'
										}">{{item.status || '未知状态'}}</text>
										<text class="progress-time">{{formatDate(item.time)}}</text>
									</view>
									<text class="progress-desc">{{item.desc || '暂无描述'}}</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 回复内容 -->
					<view class="reply-section" v-if="appeal.reply">
						<view class="reply-header">
							<text class="reply-title">官方回复</text>
						</view>
						<view class="reply-content">
							<text class="reply-text">{{ appeal.reply || '暂无回复' }}</text>
						</view>
					</view>

					<!-- 工单时间 -->
					<view class="order-footer">
						<text class="order-time">创建时间：{{ formatDate(appeal.createdAt) }}</text>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view class="empty-state" v-else>
				<view class="empty-icon">📋</view>
				<text class="empty-title">暂无工单记录</text>
				<text class="empty-desc">您还没有提交过投诉建议</text>
				<button class="create-btn" @click="goToCreate">
					<text class="btn-text">立即反馈</text>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	import config from '@/config/config';
	import {
		appealList,
	} from '@/api/mine.js'

	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				config,
				appealData: [],
				pages: {
					page: 1,
					limit: 20
				},
				expandedProgress: {} // 记录每个工单的展开状态
			}
		},
		onShow() {
			this.initData()
		},
		methods: {
			initData() {
				uni.showLoading({
					title: '加载中...',
					mask: true,
				})
				appealList(this.pages).then(res => {
					if (res && res.data.data) {
						this.appealData = res.data.data.list || []
						this.total = res.data.data.pagination ? res.data.data.pagination.total : 0
					} else {
						this.appealData = []
						this.total = 0
					}
					uni.hideLoading()
				}).catch(err => {
					console.error('加载工单数据失败:', err)
					uni.hideLoading()
					this.appealData = []
					this.total = 0
					uni.showToast({
						title: "加载失败",
						icon: "error",
					});
				})
			},
			//查看详情
			lookInfo(message) {
				// 这里可以根据实际需求跳转到工单详情页面
				// uni.showToast({
				// 	title: "工单详情功能开发中",
				// 	icon: "none",
				// });
			},
			closePage() {
				uni.navigateBack()
			},
			goToCreate() {
				this.$router.smartNavigate({
					url: '/pages/mePages/complaintsSuggestions'
				})
			},
			toggleProgress(appealId) {
				this.$set(this.expandedProgress, appealId, !this.expandedProgress[appealId])
			},
			getExpandedStatus(appealId) {
				return this.expandedProgress[appealId] || false
			},
			getDisplayProgress(progress, appealId) {
				if (!progress || !progress.length) return []
				const isExpanded = this.getExpandedStatus(appealId)
				return isExpanded ? progress : progress.slice(-4) // 默认显示最后4条
			},
			formatDate(dateString) {
				if (!dateString) return ''

				const date = new Date(dateString)
				const now = new Date()
				const diff = Math.floor((now - date) / 1000) // 秒差

				// 1分钟内
				if (diff < 60) return '刚刚'

				// 1小时内
				if (diff < 3600) return `${Math.floor(diff / 60)}分钟前`

				// 今天内
				if (date.toDateString() === now.toDateString()) {
					return `${date.getHours()}:${date.getMinutes().toString().padStart(2, '0')}`
				}

				// 今年内
				if (date.getFullYear() === now.getFullYear()) {
					return `${date.getMonth() + 1}月${date.getDate()}日`
				}

				// 其他
				return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`
			},

			getPostsType(type) {
				const postsTypes = {
					1: '差评申述',
					2: '信誉分申述',
					3: '新增商品',
					4: '开通新小区',
					5: '其他'
				};
				return postsTypes[type] || '未知类型';
			},
			getNotificationType(status) {
				const notificationTypes = {
					1: '待处理',
					2: '已处理',
					3: '已驳回'
				};
				return notificationTypes[status] || '待处理';
			}
		},
	}
</script>

<style lang="scss" scoped>
	.work-order-container {
		background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
		min-height: 100vh;
	}

	// 头部样式
	.header-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		width: 100%;

		.header-left {
			.back-btn {
				width: 64rpx;
				height: 64rpx;
				background: rgba(255, 255, 255, 0.9);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
				transition: all 0.3s ease;

				&:active {
					transform: scale(0.95);
					background: rgba(255, 255, 255, 1);
				}

				.back-icon {
					font-size: 32rpx;
					color: #333;
					font-weight: 600;
				}
			}
		}

		.header-center {
			flex: 1;
			text-align: center;

			.page-title {
				font-size: 36rpx;
				font-weight: 700;
				color: #333;
			}
		}

		.header-right {
			.header-actions {
				.action-text {
					font-size: 24rpx;
					color: #666;
					background: rgba(255, 255, 255, 0.8);
					padding: 8rpx 16rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 主要内容区域
	.main-content {
		padding: 32rpx;
	}

	// 工单列表
	.work-order-list {
		.work-order-item {
			background: white;
			border-radius: 20rpx;
			margin-bottom: 24rpx;
			padding: 32rpx;
			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.98);
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.12);
			}

			.order-header {
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				margin-bottom: 24rpx;

				.order-info {
					flex: 1;

					.order-number {
						margin-bottom: 12rpx;

						.number-label {
							font-size: 24rpx;
							color: #666;
						}

						.number-value {
							font-size: 26rpx;
							color: #333;
							font-weight: 600;
							font-family: 'Courier New', monospace;
						}
					}

					.order-type {
						.type-badge {
							padding: 8rpx 16rpx;
							border-radius: 20rpx;
							font-size: 24rpx;
							font-weight: 600;
							white-space: nowrap;
							display: inline-block;
							max-width: 120rpx;
							overflow: hidden;
							text-overflow: ellipsis;

							&.type-complaint {
								background: linear-gradient(135deg, #FF4D4F 0%, #FF7875 100%);
								color: white;
							}

							&.type-suggestion {
								background: linear-gradient(135deg, #52C41A 0%, #73D13D 100%);
								color: white;
							}

							&.type-appeal {
								background: linear-gradient(135deg, #1890FF 0%, #40A9FF 100%);
								color: white;
							}

							&.type-other {
								background: linear-gradient(135deg, #722ED1 0%, #9254DE 100%);
								color: white;
							}
						}
					}
				}

				.order-status {
					.status-badge {
						padding: 8rpx 16rpx;
						border-radius: 20rpx;
						font-size: 24rpx;
						font-weight: 600;

						&.status-pending {
							background: #FFF7E6;
							color: #FA8C16;
							border: 1px solid #FFD591;
						}

						&.status-processing {
							background: #E6F7FF;
							color: #1890FF;
							border: 1px solid #91D5FF;
						}

						&.status-completed {
							background: #F6FFED;
							color: #52C41A;
							border: 1px solid #B7EB8F;
						}

						&.status-rejected {
							background: #FFF2F0;
							color: #FF4D4F;
							border: 1px solid #FFCCC7;
						}
					}
				}
			}

			.order-content {
				margin-bottom: 24rpx;

				.content-text {
					font-size: 28rpx;
					color: #333;
					line-height: 1.6;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					overflow: hidden;
				}
			}

			.progress-section {
				margin-bottom: 24rpx;

				.progress-title {
					margin-bottom: 16rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-left {
						display: flex;
						align-items: center;
						flex: 1;

						.title-text {
							font-size: 26rpx;
							color: #666;
							font-weight: 600;
						}

						.progress-count {
							font-size: 22rpx;
							color: #999;
							margin-left: 8rpx;
						}
					}

					.expand-btn {
						display: flex;
						align-items: center;
						padding: 8rpx 16rpx;
						background: #f8f9fa;
						border-radius: 16rpx;
						transition: all 0.3s ease;
						flex-shrink: 0;

						&:active {
							background: #e9ecef;
							transform: scale(0.95);
						}

						.expand-text {
							font-size: 24rpx;
							color: #666;
							margin-right: 4rpx;
						}

						.expand-icon {
							font-size: 20rpx;
							color: #999;
						}
					}
				}

				.progress-list {
					.progress-item {
						display: flex;
						align-items: flex-start;
						margin-bottom: 16rpx;
						position: relative;

						&:last-child {
							margin-bottom: 0;
						}

						&:not(:last-child)::after {
							content: '';
							position: absolute;
							left: 8rpx;
							top: 24rpx;
							width: 2rpx;
							height: calc(100% - 16rpx);
							background: #f0f0f0;
						}

						.progress-dot {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background: #D9D9D9;
							margin-right: 16rpx;
							margin-top: 8rpx;
							flex-shrink: 0;
							position: relative;
							z-index: 1;

							&.active {
								background: #52C41A;
								box-shadow: 0 0 0 4rpx rgba(82, 196, 26, 0.2);
							}

							&.completed {
								background: #52C41A;
							}

							&.processing {
								background: #1890FF;
							}

							&.pending {
								background: #FA8C16;
							}
						}

						.progress-content {
							flex: 1;

							.progress-header {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 8rpx;

								.progress-status {
									font-size: 26rpx;
									color: #333;
									font-weight: 600;

									&.status-completed {
										color: #52C41A;
									}

									&.status-processing {
										color: #1890FF;
									}

									&.status-pending {
										color: #FA8C16;
									}
								}

								.progress-time {
									font-size: 22rpx;
									color: #999;
								}
							}

							.progress-desc {
								font-size: 24rpx;
								color: #666;
								line-height: 1.4;
							}
						}
					}
				}
			}

			.reply-section {
				margin-bottom: 24rpx;
				background: #f8f9fa;
				border-radius: 12rpx;
				padding: 20rpx;

				.reply-header {
					margin-bottom: 12rpx;

					.reply-title {
						font-size: 26rpx;
						color: #333;
						font-weight: 600;
					}
				}

				.reply-content {
					.reply-text {
						font-size: 26rpx;
						color: #666;
						line-height: 1.5;
					}
				}
			}

			.order-footer {
				border-top: 1px solid #f0f0f0;
				padding-top: 16rpx;

				.order-time {
					font-size: 22rpx;
					color: #999;
					text-align: right;
				}
			}
		}
	}

	// 空状态
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 120rpx 32rpx;

		.empty-icon {
			font-size: 120rpx;
			margin-bottom: 32rpx;
			opacity: 0.6;
		}

		.empty-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #666;
			margin-bottom: 16rpx;
		}

		.empty-desc {
			font-size: 26rpx;
			color: #999;
			text-align: center;
			margin-bottom: 48rpx;
		}

		.create-btn {
			width: 240rpx;
			height: 80rpx;
			background: linear-gradient(135deg, #FF6B35 0%, #FE6100 100%);
			border: none;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;

			&:active {
				transform: scale(0.95);
				background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
			}

			.btn-text {
				font-size: 28rpx;
				color: white;
				font-weight: 600;
			}
		}
	}

	// 兼容旧样式
	.header_slot {
		padding: 0 32rpx;
		width: 100%;
		font-weight: 500;
		font-size: 36rpx;
		color: #2C2622;
	}

	.null_data {
		padding: 32rpx;
	}

	.notice_box {
		padding: 32rpx;
		border-bottom: 1px solid #ccc;
		background-color: #fff;

		.notice_item {
			position: relative;
			width: 100%;
			height: 20px;
		}
	}

	.container {
		padding: 20rpx;
		background-color: #f5f5f5;
	}

	.message-item {
		margin-bottom: 20rpx;
		padding: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
		position: relative;
	}

	.badge {
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		width: 20rpx;
		height: 20rpx;
		background-color: #ff4d4f;
		border-radius: 50%;
	}

	.message-content {
		margin-left: 20rpx;
	}

	.message-title {
		font-weight: bold;
		font-size: 32rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.message-content-text,
	.message-time,
	.message-type {
		font-size: 28rpx;
		color: #666;
		margin-bottom: 10rpx;
		display: block;
	}

	.message-time {
		margin-top: 8rpx;
		text-align: right;
		font-size: 24rpx;
	}

	.tag-container {
		margin-bottom: 10rpx;
	}

	.tag {
		display: inline-block;
		padding: 4rpx 12rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		background-color: #39b54a;
	}

	.no-messages {
		text-align: center;
		margin-top: 50rpx;
		color: #888;
		font-size: 32rpx;
	}
</style>